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Abstract. We have developed a Prolog visualization system that is 
intended to support Prolog programming education. The system uses 
Logichart diagrams to visualize Prolog programs. The Logichart dia- 
gram is designed to visualize the Prolog execution flow intelligibly and 
to enable users to easily correlate the Prolog clauses with its parts. The 
system has the following functions. (1) It visually traces Prolog execution 
(goal calling, success, and failure) on the Logichart diagram. (2) Dynamic 
change in a Prolog program by calling extra-logical predicates, such as 
'assertz' and 'retract', is visualized in real time. (3) Variable substitution 
processes are displayed in a text widget in real time. 

1 Introduction 

Prolog is a representative programming language for introductory education in 
AI programming. It has several characteristic mechanisms, including powerful 
pattern matching (unification, in Prolog terminology), automatic backtracking, 
and meta-programming. However, the implementation of these mechanisms is 
unique, so it is difficult for beginners to learn Prolog, especially if they have ex- 
perience in procedural programming languages like C and BASIC. Extra- logical 
predicates, such as 'assertz' and 'retract', enable knowledge data to be altered 
dynamically and meta-programs to be created but they can also make Prolog 
programs difficult to understand and debug. 

Visualization using program diagrams can effectively facilitate the under- 
standing and debugging of programs. The Transparent Prolog Machine, a well- 
known Prolog visualization system [ITS] , displays the structure of a pure Prolog 
program as a tree with AND/OR branches (an AND/OR tree) and depicts the 
states of the various goals as symbols at its nodes. Other visualization and de- 
bugging systems for Prolog and (constraint) logic programming languages (e.g. 
|3I4I5| ) also use AND/OR trees. However, it is not easy to correlate the content 
of a Prolog program with that of its corresponding AND / OR tree because the 
structure of the clauses of the Prolog program and their representations in the 
AND/OR tree are different. 

This paper is the first report that describes a Prolog visualization system, 
which we have implemented in SICStus Prolog [5] to support Prolog program- 
ming education. The system uses Logichart diagrams to visualize Prolog pro- 
grams. Logichart is a program diagram description language that we developed 
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to help visualize the execution flow of Prolog programs [7 8 9. A Logichart dia- 
gram has a tree-like structure, as shown in Fig.[l] with the following two features. 
(1) The head and body goals that compose each clause are aligned horizontally, 
and (2) a calling goal and the heads of the clauses that it calls are aligned verti- 
cally. Feature (1) gives clauses in a Prolog program and their representations in 
the corresponding Logichart diagram a similar structure so that it is easier to see 
the correspondences between them. Feature (2) makes it easier to understand 
the relationships between related clauses, because they are vertically adjacent. 

The system has three functions: (1) it animates Prolog execution (goal calling, 
success, and failure) on the Logichart diagram, (2) it visualizes a dynamic change 
in a Prolog program in real time by calling extra-logical predicates, such as 
'assertz' and 'retract', and (3) it displays variable substitution processes in a 
text widget in real time. 

2 Logichart diagrams and Logichart- AGG 

Logichart diagrams have been developed to represent computation, which is 
the response of a Prolog program to a query, as an intelligible diagram |7I8I9| . 
A Prolog program is visualized by using Logichart diagrams as follows. For 
goal sequences 'Gi, G2, • • • , G„' of a user's query, the system adds the clause 
'prolog .program :- Gi, G2, G„.' to the program. The node labeled 'pro- 
log_program' corresponding to the head of this clause is the root node of the 
Logichart diagram. The head and body goals composing a clause are horizon- 
tally aligned from left to right according to the Prolog syntax. However, a goal 
and clauses, which have heads that can be unified with it, are vertically aligned 
from top to bottom in the same order as the clauses in the Prolog program. In 
this manner, the Logichart is defined based on the Prolog syntax and the eval- 
uation rule of Prolog interpreters (leftmost derivation, depth-first search). As a 
result, a Logichart diagram is relatively easy to understand, and correspondence 
with the source Prolog program is clearly presented. It must be noted that the 
Logichart diagram includes an execution tree (whose root node is labeled 'pro- 
log_program') for the user's query as a subtree. 

Figure [T] shows a Logichart diagram that corresponds to the Prolog program 
shown below and the query '?- test(X,Y,Z).'. 

test(X,Y,Z) :- appendList(X,Y,Z) , 

write((X,Y,Z)) ,nl. 
test(_,_,_) :- write (end) ,nl . 
appendList( [] ,X,X) . 
appendList( [XlLl] ,L2, [X I List] ) :- 

appendList(Ll,L2,List) . 

Node labels used in Logichart diagrams are shown in Fig. [2] The heads, body 
goals, built-in predicates, and user-defined predicates are clearly and distinctively 
depicted using these node labels. The label 'recursive clause' enables depicting a 
Prolog program including recursive goals within a finite-area Logichart diagram. 
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We formalized Logichart-AGG |7I8I9| . an attribute graph grammar denned 
for specifying the syntax and layout rules of Logichart diagrams. It consists 
of a context-free graph grammar whose productions are formalized to specify 
the graph-syntax rules of Logichart diagrams. It also uses semantic rules, which 
are defined so that they extract the layout information needed to display a 
Logichart diagram as the attributes attached to node labels. The semantic rules 
are formalized so as to obtain Logichart diagrams for a minimum-area layout 
under a specific layout constraint. The Logichart-AGG specifications are very 
concise and consist of 13 productions associated with 88 semantic rules. Some of 
the productions and their associated semantic rules in the Logichart-AGG are 
illustrated in Figs. [3] to [5] 

Figure [3] shows the production and semantic rules to rewrite the initial node 
'[ prolog_ program ]'. These rules are formalized to represent queries given in 
the Prolog syntax, and the nonterminal node 'goal' in the right-hand-side graph 
corresponds to the query. A graph that is isomorphic to the right-hand side of 
Production 1 is derived by applying this production to the initial node. Semantic 
rules 7r x (l) = RootX and tt v (1) = RootY mean that the x-coordinate of node '1' 
is 'RootX' and that the y-coordinate of node '1' is 'RootY'. Semantic rule 7T X (2) = 
RootX + get_width("prolog_program") + GapX means that the x-coordinate of 
node '2' is equal to 'RootX' plus the width of the node labeled "prolog-program" 
plus the horizontal gap 'GapX'. Semantic rule 71^(2) = RootY means that the 
y-coordinate of node '2' is 'RootY'. The root node "prolog.program" and the 
subdiagram derived from the nonterminal node '2' labeled 'goal' are aligned with 
a horizontal separation of 'GapX' by these semantic rules. 

The production and semantic rules shown in Fig. [4] are as formalized for 
the 'and' operation on Prolog goals. A node labeled 'goal' is replaced with a 
graph that is isomorphic to the right-hand side of Production 2 by applying this 
production. Semantic rule ir x (2) = ir x (l) +subtree_width(l) + GapX means that 
the x-coordinate of node '2' is equal to the x-coordinate of node '1' plus the 
width of the subdiagram derived from node '1' plus the horizontal gap 'GapX'. 
Therefore, goals connected by the operator 'and' are aligned with a separation 
of 'GapX' horizontally. 

The production and semantic rules shown in Fig. [5] are formalized for the call 
of a goal. The semantic rule 7r y (2) = ir y (l) + depth(l) + GapY means that the 
y-coordinate of node '2' is equal to the y-coordinate of node '1' plus the depth 
of node '1' plus the vertical gap 'GapY'. Therefore, a calling goal and the clause 
heads of the goals called by it arc aligned with a separation of 'GapY' vertically. 

Implementing the Prolog visualization system in complete accord with Logichart- 
AGG guarantees that, for any correct Prolog program, the corresponding Logichart 
diagram is displayed (completeness) and any Logichart diagram displayed by the 
system is valid for Logichart-AGG (soundness) [TU] . 
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3 Prolog visualization system 

The Prolog visualization system is implemented in SICStus Prolog with the 
Tkl/Tk library [6. and is intended to support Prolog programming education. 

A user edits and then saves a Prolog program by using the system's text 
editor or other editors. He/she then inputs the Prolog program into the system. 
Next, he/she inputs a query into the system via a query-inputting window. A 
Logichart diagram for the Prolog program and the query is then depicted in a 
canvas widget. Figure [6] shows the system's text editor, and Fig. [7] shows the 
query-inputting window. 

The system has some features specifically designed to support Prolog pro- 
gramming learning. 

3.1 Visual trace of Prolog execution 

The system visually traces Prolog execution on a Logichart diagram in real 
time. A tracer implemented using a meta-interpreter technique displays the goal- 
execution process on the Logichart diagram; the color of each node changes 
depending on the goal state, i.e., the node corresponding to a goal that has been 
called becomes green, a goal that has succeeded becomes blue, and a goal that 
has failed becomes red. 

The tracer has two modes, i.e., one-step and automatic. In the one-step mode, 
each step of goal calling is executed and visualized in the Logichart diagram 
whenever the 'go' button is pressed, while in the automatic mode the query is 
executed completely and the final state is visualized in the Logichart diagram. 
The effect of cut ('!') on a program execution flow is clearly and intelligibly 
visualized in the one-step mode on a Logichart diagram. Figure [8] shows a screen 
shot of a visual trace of the Prolog program shown below and the query '?- f.'. 

f :- g, !, h, fail, 
f . 

g : - write (a) ,nl . 
g :- write (b) ,nl. 
h. 

If the goals specified in a query are satisfied, and if variables are included 
in the query, then the system displays a messageBox window that asks whether 
the system executes backtracking or not. If the user clicks the 'yes' button, the 
system executes backtracking and the backtracking process is visualized on the 
Logichart diagram. 

3.2 Dynamic change in the Logichart diagram 

Dynamic changes in a Prolog program by calling extra-logical predicates, such 
as 'asserta', 'assertz', and 'retract', are visualized in real time using a Logichart 
diagram. Figures [9] and [10] show a dynamic change in the Prolog program shown 
below and the query '?- f.' by calling 'assertz((g(Y) :- k(Y)))'. 
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f :- g(X), h(X), g(X). 
g(a). 

h(Y) :- assertz((g(Y) :-k(Y))). 
k(X) :- write(X) . 

Clauses retracted by calling 'retract' are not eliminated but depicted with 
crosses in a Logichart diagram. For the Prolog program shown below and the 
query '?- f.', a screen shot of a Logichart diagram after calling 'retract((g :- 
write(a)))' is shown in Fig. 11 

f :- g, h, g, fail, 
g : - write (a) . 
g : - write (b) . 

h :- retract ((g :- write (X))). 

If the nodes corresponding to those of the retracted clauses are eliminated 
from the Logichart diagram, the backtracking process in the Logichart diagram 
becomes impossible to visualize. Depicting retracted clauses with crosses enables 
visualizing the backtacking process in the Logichart diagram. 

3.3 Display of variable substitutions 

The variable-substitution process is displayed in a text widget in real time. Figure 
[T2| shows a text widget displaying variable substitution for each node. We are 
now implementing a function to display variable-substitution information within 
the Logichart diagram. 

4 Conclusions 

We presented a Prolog visualization system that is implemented in complete 
accord with Logichart- AGG. Logichart diagrams make it easy to understand the 
Prolog execution flow. A remarkable feature of the system is that it visualizes 
the dynamic alteration of a Logichart diagram by calling extra-logical predicates, 
such as 'assertz' and 'retract'. 

We are currently developing fine- and coarse-grained (Logichart) diagrams 
as proposed in [1 to visualize and navigate in large execution trees. These will 
help to develop the Prolog visualization system into a practical Prolog develop- 
ing environment. The usefulness of our Prolog visualization system for Prolog 
programming education needs to be empirically investigated. 
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prolog_program test(X.YZ) 



;ip|iL'ii;ILisUX, Y.Z| - 



ll appendList([], X, X) J 



~l write((X,Y,Z))y ^ ^/ nl y / 



appendList([XfLl],L2, [XIList]) 




append Li st(Ll , L2, List) 





ll :tppendList([], X, X)y 7 



appcndLisi(|XILI|.L2,|XILisi|) 



Fig. 1. Logichart diagram 
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THEN 
ELSE 



head 
goal 

| negated goal 

recursive clause 
unit clause 

built-in predicate 
goal sequence 
if goal 

THEN label 
ELSE label 



Fig. 2. Node labels of Logichart diagrams 



Production 

[prolog_program] q 



"prolog_program" 



e,h 



■♦[goal] 



C = ( 



Semantic Rules 

7r x ( 1 ) = RootX, jt y (1) = RootY, 

7i x (2) = RootX + get_width( 1 ) + GapX, 7r y (2) = RootY, 
subtree_width(0) = get_width(l) + GapX + subtree_width(2), 
subtree_depth(0) = max(get_depth( 1 ), subtree_depth(2)) 



Fig. 3. Rules used to rewrite initial node '[ prolog_program ]' 
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Production 

e h 

[goal] ::= [goal ] ' > [goal] 2 



C = {(#,e,e,l,in), (#,e,e,2,out), (#,h,h,l,m), 
(#,h,h,2,out), (#,v,v,l,in), (#,v,v,l,out)} 
Semantic Rules 

7t X (l) = rc X (0), 7I y (l) = 7Iy(0), 

ti x (2) = 7i x (l) + subtree_width(l) + GapX, 7i y (2) = 7i y (l), 
subtree_width(0) = subtree_width(l) + GapX + subtree_width(2), 
subtree_depth(0) = max(subtree_depth(l), subtree_depth(2)) 

Fig. 4. Rules formalized for 'and' operation on Prolog goals 



Production 

[goal] q : 



<call_ 


joal> 




e,v 



[clause] - 



Semantic Rules 

7t x (l) = 7 r x (0), 
7t x (2) = J r x (l), 



C= {(#,e,e,l,in), (#,e,e,l,out), 
(#,h,h,l,in), (#,h,h,l,out), 
(#,v,v,l,in), (#,v,v,2,out)} 



7t y (2) = jty(l) + getdepth(l) + GapY, 
subtree width(O) = max(get_width(l), subtree_width(2)), 
subtreedepth(O) = getdepth(l) + GapY + subtree_depth(2) 



Fig. 5. Rules formalized for call of goal 
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S3 Input query [DUD® 


File Visualize Edit Help 


appendl_ist([XIL1],L2,[XIList]) 
appendList([]>I>I) 




Consulted file CVhome/adachi/Prolog/SICStus Prolog/Logichart 




test|X,YZ) :- appendl_ist(X.YZ], 

test( , , ) :- write(end),nl. 
appendListfJIXX). 
appendList[[X|L1]X2,[X|List]):- 
appendl_ist(L1 ,L2,List). 






test(_9822,_9823,_9824) 








test(X,YZ) 




±1 ±i 






Input Cance^^ 



Fig. 6. System's text editor 



Fig. 7. Query-inputting window 
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Fig. 8. Visual trace of Prolog execution 




Fig. 10. Logichart diagram after change 




Fig. 11. Logichart diagram after calling 'retract((g :- write(X)))' 
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Fig. 12. Text widget 



displaying node identifiers and variable substitution 



